<template>
  <div class="shop" ref="shopTarget">
    <div class="title">
      <h2>热门商品</h2>
    </div>

    <div
      class="demo"
      style="margin: 0 auto"
      v-masonry
      gutter="15"
      percent-position="true"
      fit-width="true"
      ref="waterfallTarget"
    >
      <div
        v-masonry-tile
        class="card"
        v-for="item in goodsData"
        :key="item.id"
        @click="dianji(item.id)"
      >
        <img :src="item.s_goods_photos[0].path" alt="" />
        <div class="goodsMsg">
          <div class="goodsName">
            <p>{{ item.name }}</p>
          </div>
          <div class="goodsDesc">{{ item.desc }}</div>
          <div class="price">
            <p>
              <strong>￥</strong> {{ item.price }}.00
              <span>库存:{{ item.stock_num }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<!-- 
  看不到底部的原因：
    是因为整个瀑布流组件是定位，脱离了文档流，造成父元素盒子里没有内容撑开
  如何解决：
    获取瀑布流的动态高度，赋值到父元素上shop这个div + 100的留白，这样就可以显示完整
 -->

<script setup>
import {
  ref,
  nextTick, // 可以在渲染后获取数据
  onMounted, // 生命周期
  defineProps, // 接收数据并定义数据的类型
  defineEmits, //
  onUpdated,
} from "vue";
// import router from "../../../router";
import { delayPrint } from "../../../utils/index";
import store from "../../../store";
import { useRouter } from "vue-router";
let router = useRouter();

defineProps({
  goodsData: Array,
});

// 数据
onUpdated(() => {
  // console.log("出发了吗");
  nextTick(() => {
    // 获取瀑布流的动态高度
    // console.log(waterfallTarget.value.style.height);
  });
});

const emits = defineEmits(["go"]);
function cb() {
  const { scrollHeight, scrollTop, clientHeight } = document.documentElement;
  // console.log(scrollHeight, scrollTop, clientHeight);
  if (scrollHeight - scrollTop - 2 <= clientHeight) {
    // console.log("触底了");
    // 派发一个事件到父组件中更新数据
    emits("go");
  }
}
document.addEventListener("scroll", delayPrint(800, cb));
let shopTarget = ref(null);
let waterfallTarget = ref(null);

// 路由传参
const dianji = (id) => {
  router.push(`/detail?id=${id}`);
};
</script>

<style lang="scss" scoped>
.shop {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  .title {
    display: inline-block;
    margin: 0.14rem 0 0.14rem 0.18rem;
    h2 {
      font-size: 0.18rem;
      color: #333;
    }
  }
  .demo {
    width: 375px;
    background-color: #f6f6f6;
    .card {
      width: 43vw;
      border: 1px;
      border-radius: 15px;
      overflow: hidden;
      margin-top: 10px;
      background-color: white;
      img {
        width: 100%;
        display: block;
        height: auto;
      }
      .goodsMsg {
        background-color: white;
        .goodsName {
          margin: 0.1rem 0;
          p {
            font-size: 0.14rem;
            color: #333;
            width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
        .goodsDesc {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-bottom: 0.04rem;
          color: #666;
        }
        .price {
          p {
            font-size: 0.2rem;
            color: #ff4142;
            margin: 0.03rem 0;
            span {
              font-size: 0.06rem;
              color: #999;
              margin-left: 1rem;
              display: block;
            }
            strong {
              font-size: 0.14rem;
              margin-left: 0.04rem;
            }
          }
        }
      }
    }
  }
}
</style>
